$('.s_bot div:not(.s_tit)').click(function () {
    if ($(this).find('i').hasClass('icon-xiangxia4')) {
        $(this).find('i').addClass('icon-xiangshang4').removeClass('icon-xiangxia4');
        $(this).removeClass('active');
    } else {
        $(this).find('i').addClass('icon-xiangxia4').removeClass('icon-xiangshang4');
        $(this).addClass('active').siblings().removeClass('active');
        $(this).siblings().find('i').addClass('icon-xiangshang4').removeClass('icon-xiangxia4')
    }
})

// 瀑布流



var shopData = data.shopData.main;
console.log(shopData);
function init(arr) {
    $('#gallery-wrapper').empty();
    $.each(arr, function (index, value) {
        if (value.ziying === '') {
            $(`
            <article class="white-panel">
                <img src="${value.bigurl}" class="thumb">
                <img src="${value.small}" class="thumb1">        
                <h1><a href="#">${value.title}</a></h1>
                <p class='ziying'>商家自营</p>
                <p>主营品牌:${value.brand}</p>
                <p>商家等级:<img style='vertical-align: middle;' src="../images/shop/1536862279147721991.png" width='20px'></p>
            </article>
        `).appendTo('#gallery-wrapper');
        } else {
            $(`
            <article class="white-panel">
                <img src="${value.bigurl}" class="thumb">
                <img src="${value.small}" class="thumb1">        
                <h1><a href="#">${value.title}</a></h1>
                <p>主营品牌:${value.brand}</p>
                <p>商家等级:<img style='vertical-align: middle;' src="../images/shop/1536862279147721991.png" width='20px'></p>
            </article>
        `).appendTo('#gallery-wrapper');
        }
    })
}
init(shopData);


$(function () {
    $("#gallery-wrapper").pinterest_grid({
        // 一行显示的个数
        no_columns: 4,
        // x方向间距
        padding_x: 50,
        // y方向间距
        padding_y: 20,
        margin_bottom: 50,
        // 页面小于700px一排显示
        single_column_breakpoint: 700
    });

});


function sortHot(a, b) {
    return b.hot - a.hot;
}
var arr = [];
$.extend(true,arr,shopData);

$('.hot').click(function () {
    if ($(this).hasClass('active')) {
        init(arr.sort(sortHot));
    }
    else {
        init(shopData);
    }
})



function sortSales(a, b) {
    return b.sales - a.sales;
}

$('.num').click(function () {
    if ($(this).hasClass('active')) {
        init(arr.sort(sortSales));
    }
    else {
        init(shopData);
    }
})


function sortRank(a, b) {
    return b.rank - a.rank;
}
$('.grade').click(function () {
    if ($(this).hasClass('active')) {
        init(arr.sort(sortRank));
    }
    else {
        init(shopData);
    }
});
